{{ define "main" }}
{{ if .has_music }}
<audio id="mymusic" src=""></audio>
{{ end }}
<div class="d-flex justify-content-between mb-1">
  <div class="btn-group" role="group">
    <button id="download" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa fa-fw fa-download"
        aria-hidden="true"></i>Download</button>
    <button id="archive" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal"
      data-target="#archiveModal"><i class="fa fa-fw fa-archive" aria-hidden="true"></i>Archive</button>
    <button id="move" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal"
      data-target="#moveModal"><i class="fa fa-fw fa-clipboard" aria-hidden="true"></i>Move</button>
    <button id="delete" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa fa-fw fa-trash"
        aria-hidden="true"></i>Delete</button>
  </div>
  <div class="btn-group" role="group">
    <form class="card">
      <div class="card-body row no-gutters align-items-center" style="padding:0px 5px;">
        <div class="col-auto">
          <i class="fa fa-search"></i>
        </div>
        <!--end of col-->
        <div class="col">
          <input id="filter" class="form-control form-control-sm form-control-borderless" type="search"
            placeholder="Search...">
        </div>
      </div>
    </form>
    <button id="upload" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal"
      data-target="#uploadModal"><i class="fa fa-fw fa-upload" aria-hidden="true"></i>Upload File</button>
    <button id="new" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal"
      data-target="#newModal"><i class="fa fa-fw fa-plus" aria-hidden="true"></i>New Folder</button>
  </div>
</div>
{{ if .alert }}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>{{ .alert.title }}:</strong> {{ .alert.message }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
{{ end }}
<div class="table-fix-head">
  <table class="table border table-hover table-md">
    <thead class="thead-light">
      <tr>
        <th style="width:30px;"><input type="checkbox" class="select-all" /></th>
        <th class="table-header-item table-header-name" scope="col"><label>Name</label><i class="fa fa-fw fa-sort"></i>
        </th>
        <th class="table-header-item table-header-time" scope="col"><label>Time</label><i class="fa fa-fw fa-sort"></i>
        </th>
        <th class="table-header-item table-header-type" scope="col"><label>Type</label><i class="fa fa-fw fa-sort"></i>
        </th>
        <th class="table-header-item table-header-size" scope="col"><label>Size</label><i class="fa fa-fw fa-sort"></i>
        </th>
      </tr>
    </thead>
    <tbody id="file-list-body">
      {{ range .list }}
      <tr class="file-row">
        <td style="width:30px;"><input type="checkbox" class="select" value="{{ .Name }}" /></td>
        <td>
          <i class="fa fa-fw {{ .Icon }}" isdir="{{ .IsDir }}"></i>
          <a class="filename" href="{{ .Href }}">{{ .Name }}</a>
          {{ if .PreviewUrl }}
          <a class="preview" href="{{ .PreviewUrl }}" title="preview" target="_blank" style="color:black;"><i
              class="fa fa-fw fa-eye"></i></a>
          {{ end }}
        </td>
        <td>{{ .ModTime }}</td>
        <td>{{ .Type }}</td>
        <td style="text-align: left;">{{ .Size }}</td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
<footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">{{ .list_len }} 个项目</span>
    <span class="text-muted" id="selected-count"></span>
  </div>
</footer>
{{ template "move_modal" . }}
{{ template "archive_modal" . }}
{{ template "upload_modal" . }}
{{ template "new_modal" . }}
{{ template "preview_modal" . }}
{{ end }}